<template class="index_background">

  <el-container direction="vertical">
    <div class="backpic2">
      <el-image :src="require('@/assets/noticepic.jpg')" alt="sorry" lazy="true"></el-image>
    </div>
    <div style="margin-top: 200px">
      <el-row style="background-color: white; margin-left: 100px; margin-right: 100px" class="title">
        <el-col :span="3" :offset="0.5" style="height: 100px">
          <div style="font-size: 20px; margin-top: 20px; margin-left: -13px">职位信息
          </div>
          <div style="font-size: 15px; color: #909399; margin-top: 8px; margin-left: 13px">Job Description</div>
        </el-col>
      </el-row>
    </div>

    <el-container>
      <div style="margin-top: 10px; margin-left: 10%">
        <div id="div1" style="margin-right: 20px">
          <el-main class="job-all">
            <el-row style="margin-left: 10px; border-bottom-style: solid;border-color: black;border-width: 1px;">
              <div id="div1" style="margin-right: 280px; text-align: left">
                <div style="font-size: 23px; font-weight: bold">{{jobname}}</div>
                <div style="margin-top: 5px; font-size: 13px; color: #909399">发布时间：{{pubtime}}</div>
                <div style="margin-top: 10px; font-size: 15px; margin-bottom:20px">{{jobtype}} | 工资{{salary}}/天 {{urgent}}</div>
              </div>
              <div id="div1" style="margin-right: 10px; margin-top:-20px">
                <el-button  @click="collect()" type="primary" size="small" style="margin-top:40%; margin-right: 10%;">收藏职位</el-button>
              </div>
              <div id="div1" style="margin-top:-20px">
                <el-button v-bind:disabled="sflag=='true'" @click="postcv(scope.$index, scope.row)" type="primary" size="small" style="margin-top:40%; margin-right: 10%;">{{status}}</el-button>
              </div>
            </el-row>

            <el-row style="text-align: left; margin-left: 10px; margin-top: 20px">
              <div>
                <p class="pos-title">职位描述</p>
                <div v-for="item in desc">
                <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">{{item}}</p>
                </div>
              </div>
              <div>
                <p class="pos-title">职位要求</p>
                <div v-for="item in req">
                  <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">{{item}}</p>
                </div>
              </div>
              <div>
                <p class="pos-title">投递要求</p>
                <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">计划招聘人数：{{num}}</p>
                <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">简历要求：不限</p>
                <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">截止日期：2020年07月28日</p>
              </div>
              <div>
                <p class="pos-title">工作地点</p>
                <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">{{location}}</p>
              </div>
            </el-row>
          </el-main>
        </div>

        <div id="div1">
          <el-card class="com-all">
            <div style="font-size: 23px; font-weight: bold">公司简介</div>
            <div style="margin-top: 10px; margin-bottom: 10px">
              <div id="div1">
                <el-image :src="logo" alt="sorry" lazy="true" style="height: 100px; width: 100px"></el-image>
              </div>
              <div id="div1" style="margin-left: 30px">
                <div style="font-size: 20px; font-weight: bold">{{ename}}</div>
                <el-button type="primary" size="small" style="margin-top: 40px" @click="gotoComPro">企业详情</el-button>
              </div>
            </div>
            <el-row style="margin-top: 60%">
            <div>
              <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">类型：{{etype}}</p>
              <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">规模：{{scale}}</p>
              <p style="margin-top: 8px; margin-bottom: 8px; font-size: 13px">地点：{{entlocation}}</p>
            </div>
            </el-row>
          </el-card>
        </div>

      </div>

    </el-container>

  </el-container>
</template>

<script>
import fetch from "../api/fetch";

export default {
  name: 'jobDescription',
  data() {
    return {
      //职位详细信息：
      jid: this.$route.params.jid,
      jobname: '',
      jobtype: '',
      urgent: '',
      num:'',
      pubtime: '',
      salary: '',
      desc: [],
      req: [],
      location: '',
      status: '',
      sflag: 'false',

      //企业详细信息：
      eid:'',
      ename: "",
      logo: "",
      etype: '',
      scale: '',
      entlocation: "",
      contact: "",
      intro: ""
    }
    },
  mounted() {
    this.getJobDescription(this.jid)
  },
  methods: {
    getJobDescription(jid) {
      fetch.getJobDetail(jid).then(res => {
        console.log(res)
        this.jobname = res.data.name;
        this.salary = res.data.salary;
        this.pubtime = res.data.time;
        this.location = res.data.location;
        this.eid = res.data.eid;
        this.num = res.data.hc;
        if(res.data.type==1){this.jobtype = '实习'};
        if(res.data.type==2){this.jobtype = '校招'};
        if(res.data.type==3){this.jobtype = '社招'};
        if(res.data.type==4){this.jobtype = '不限类型'};
        if(res.data.urgent==0){this.urgent = '| 急招'};
        if(res.data.status==0){this.status = '投个简历'};
        if(res.data.status==1){this.status = '等待审核', this.sflag = 'true'};
        if(res.data.status==2){this.status = '职位下线', this.sflag = 'true'};
        this.desc = res.data.duty.split(";");
        this.req = res.data.req.split(";");

        this.getCompanyDescription(this.eid)
      })
    },
    getCompanyDescription(eid) {
      fetch.getCompanyDetail(eid).then(res => {
        console.log(res)
        this.ename = res.data.ename;
        this.logo = res.data.logo;
        this.entlocation = res.data.location;
        this.contac = res.data.contac;
        this.intro = res.data.intro;
        if(res.data.type==0){this.etype = '其他'};
        if(res.data.type==8){this.etype = '其他'};
        if(res.data.type==1){this.etype = '互联网'};
        if(res.data.type==2){this.etype = '金融'};
        if(res.data.type==3){this.etype = '快消'};
        if(res.data.type==4){this.etype = '传媒'};
        if(res.data.type==5){this.etype = '餐饮'};
        if(res.data.type==6){this.etype = '教育'};
        if(res.data.type==7){this.etype = '化工'};
        if(res.data.scale==0){this.scale = '小于150人'};
        if(res.data.scale==1){this.scale = '150至500人'};
        if(res.data.scale==2){this.scale = '500至2000人'};
        if(res.data.scale==3){this.scale = '2000人以上'};


      })
    },
    gotoComPro(){
      this.$router.push({name: 'companyProfile', params: {eid: this.eid}})
  },
    collect(){
      fetch.collectPosition({sid: sessionStorage.getItem('userId'), eid: this.eid, jid:this.jid})
        .then(res =>{
          console.log(res)
          var msg = res.data.error_code
          if(msg==0){this.$Modal.success({
            title: "提示",
            content: "收藏成功"
          });}
          else{this.$Modal.success({
            title: "提示",
            content: "收藏失败，请重试"
          });}

        })

    },
    collectpos(index, row)
      {
        console.log(index, row);
        this.$confirm('收藏该职位?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '收藏成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消收藏'
          })
        })
      }

  }
}
</script>

<style>
  p{margin-top: 8px; margin-bottom: 8px; font-size: 13px}
  #div1 {float: left}

  .backpic2 {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    z-index: -1;
    background-repeat: no-repeat;

  }

  .title{
    border-bottom-style: solid;
    border-color: rgb(238, 241, 246);
    border-width: 2px;
  }

  .job-all {
    background: white;
    width: 85ex;
    height: 70ex;

  }

  .com-all {
    background: white;
    width: 32ex;
    height: 40ex;
    text-align: left;
  }

  .pos-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 15px;
  }

</style>

<style scoped>

</style>
